import React, { Component } from 'react';
import Routerview from '../../router/routerView';
import { Layout, Menu } from 'antd'
import { menuList } from '../../router/routes'
import { NavLink } from 'react-router-dom'
import { Breadcrumb } from 'antd';
const { Header, Sider, Content, Footer } = Layout

class Index extends Component {
	state = {
		breadList: [{
			path: '/index',
			name: '首页'
		}]
	}
	componentDidMount() {
		console.log(this.props.location);
		console.log(this.props.match);
	}
	handlebreadList(value) {
		const { keyPath } = value
		const list = []
		while (keyPath.length > 0) {
			const item = keyPath.pop()
			const obj = ((list[list.length - 1] && list[list.length - 1].children) || menuList).find(v => v.path === item)
			list.push(obj)
		}
		list.unshift({
			path: '/home',
			name: '首页'
		})
		this.setState({
			breadList: list
		})
	}
	render() {
		const { routes } = this.props
		const { breadList } = this.state
		return (
			<Layout>
				<Sider>
					<Menu mode="inline" theme="dark" style={{ height: '100vh' }}
						defaultSelectedKeys={['/index']}
						onClick={(value) => this.handlebreadList(value)}
					>
						{
							menuList.map((v, i) => {
								return v.children
									? <Menu.SubMenu key={v.path} title={v.name}>
										{
											v.children.map(v => {
												return <Menu.Item key={v.path}><NavLink to={v.path}>{v.name}</NavLink></Menu.Item>
											})
										}
									</Menu.SubMenu>
									: <Menu.Item key={v.path}><NavLink to={v.path}>{v.name}</NavLink></Menu.Item>
							})
						}
					</Menu>
				</Sider>
				<Layout>
					<Header style={{
						backgroundColor: '#eee',
						color: '#666',
						display: 'flex',
						alignItems: 'center'
					}}>
						<Breadcrumb>
							{
								breadList.map((v, i) => {
									return <Breadcrumb.Item key={i}>{v.name}</Breadcrumb.Item>
								})
							}
						</Breadcrumb>
					</Header>
					<Content style={{padding: 10}}>
						<Routerview routes={routes}></Routerview>
					</Content>
					<Footer></Footer>
				</Layout>
			</Layout>
		);
	}
}

export default Index;
